<template>
  <div>
    <div class="icon-collapse-wrapper" :style="iconCollapseStyle">
      <i
        :class="[
          isClose
            ? `icon-collapse ${data.iconOpenRight}`
            : `icon-collapse ${data.iconCloseLeft}`,
        ]"
        :title="isClose ? '显示侧边栏' : '隐藏侧边栏'"
        @click="toggleIsCollapse"
      ></i>
    </div>
    <el-menu
      class="zws-aside"
      :default-active="activeIndex"
      router
      @select="selectMenuItem"
      :background-color="data.navMenuBackgroundColor"
      :text-color="data.navMenuTextColor"
      :active-text-color="data.navMenuActiveTextColor"
      :collapse-transition="false"
      :style="menuStyle"
      :collapse="isClose"
      :mode="data.navMenuModeIsHorizontal ? 'horizontal' : 'vertical'"
    >
      <template v-for="(item, index) in data.navMenu">
        <el-menu-item
          :key="index"
          :index="`${index}`"
          :route="item.index"
          v-if="!item.childrens"
        >
          <div class="item-content">
            <i
              v-if="!data.navMenuModeIsHorizontal"
              :class="item.icon"
              :style="
                highlightIndex === index ? iconHighlightStyle : iconSizeStyle
              "
            ></i>
            <span
              slot="title"
              :style="highlightIndex === index ? textHighlightStyle : ''"
              >{{ $t(item.title) }}</span
            >
          </div>
        </el-menu-item>
        <el-submenu :index="`${index}`" :key="index" v-if="item.childrens">
          <template slot="title">
            <i
              v-if="!data.navMenuModeIsHorizontal"
              :class="item.icon"
              :style="
                highlightIndex === index ? iconHighlightStyle : iconSizeStyle
              "
            ></i>
            <span
              slot="title"
              :style="highlightIndex === index ? textHighlightStyle : ''"
              >{{ $t(item.title) }}</span
            >
          </template>
          <div v-for="(v, i) in item.childrens" :key="i">
            <el-menu-item :index="`${index}-${i}`" :route="v.index">
              <span slot="title" :style="itemTitleStyle">{{
                $t(v.title)
              }}</span>
            </el-menu-item>
          </div>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>
<style lang="less">
.icon-collapse-wrapper {
  height: 22px;
  margin-right: 1px;
  text-align: right;
  padding-right: 8px;
  box-sizing: border-box;
}
.item-content {
  height: 56px;
  display: flex;
  // justify-content: center;
  align-items: center;
}
/* 左侧菜单前缀图标设置 */
.icon {
  /* font-size: 24px; */
  padding-right: 10px;
  // padding-bottom: 6px;
  /* color: red !important; */
}
.icon-collapse {
  font-size: 12px;
  color: #707070;
  cursor: pointer;
}
/* .menu-wrapper:not(.el-menu--collapse) {
  width: 220px;
} */
.zws-aside {
  overflow-y: auto;
  overflow-x: hidden;
}
.zws-aside::-webkit-scrollbar {
  width: 4px;
  height: 0px;
}
.zws-aside::-webkit-scrollbar-thumb {
  border-radius: 0px;
  -webkit-box-shadow: inset 0 0 5px #8fc41e;

  background-image: linear-gradient(#8fc41e, #8fc41e),
    linear-gradient(#1b82e3, #1b82e3);
  background-blend-mode: normal, normal;
}
.zws-aside::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #2b415a;
  border-radius: 0;
  background: #2b415a;
}
.el-menu-item:hover {
  outline: 0 !important;
}

.el-tooltip__popper.is-dark {
  background: #3f536e !important;
}

/* el-tooltip__popper is-dark  */
body .el-tooltip__popper.is-dark,
body .el-aside .el-popover {
  color: #ffffff !important;
  background: #262626 !important;
  z-index: 99999999 !important;
}

/* .el-submenu__title:focus, .el-submenu__title:hover{
    outline: 0 !important;
    color: #409EFF !important;
    background: none !important;
} */

/*菜单关闭*/
.zws-aside .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  padding-top: 5px;
  -webkit-transform: rotateZ(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotateZ(-90deg);
}
/*菜单展开*/
.zws-aside .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  padding-top: 2px;
  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  transform: rotateZ(0deg);
}
.version {
  position: absolute;
  left: 22px;
  bottom: 10px;
  .text {
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
